<template>
    <el-dialog :close-on-click-modal="false"  ref="dialogform" title="查看详情" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
        <div class="pondWarning" v-if="data.status">注：该批次已封塘</div>
        <el-tabs type="border-card" v-model="activeName">
            <el-tab-pane label="养殖中" name="NOCOMPLETED">
                <el-table ref="multipleTable" :data="tableDataNoCompleted" tooltip-effect="dark" border style="width: 100%">
                    <el-table-column type="index" width="50" label="序号"></el-table-column>
                    <el-table-column prop="batchName" label="选择批次"></el-table-column>
                    <el-table-column prop="plantVarietyName" label="品种"></el-table-column>
                    <el-table-column label="规格">
                        <template slot-scope="scope">
                            <el-select v-if="!data.status" v-model="scope.row.specificationId" placeholder="请选择规格"
                                @change="(e) => { changeData(e, scope.row, 'select') }">
                                <el-option v-if="s.plantVarietyId == scope.row.plantVarietyId"
                                    v-for="s, index in specificationList" :key="index" :label="s.specificationName"
                                    :value="s.specificationId"></el-option>
                            </el-select>
                            <span v-else>{{ scope.row.specificationName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="prop5" label="重量(斤)">
                        <template slot-scope="scope">
                            <el-input v-if="!data.status" type="number" v-model="scope.row.weight" placeholder="请输入重量"
                                @change="(e) => { changeData(e, scope.row, 'number', 'weight') }"></el-input>
                            <span v-else>{{ scope.row.weight }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="prop6" label="粒数(粒)">
                        <template slot-scope="scope">
                            <el-input v-if="!data.status" type="number" v-model="scope.row.num" placeholder="请输入粒数"
                                @change="(e) => { changeData(e, scope.row, 'number', 'num') }"></el-input>
                            <span v-else>{{ scope.row.num }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="staffName" label="操作人"></el-table-column>
                    <el-table-column prop="inputDate" label="投塘时间"></el-table-column>
                    <el-table-column label="操作" v-if="!data.status">
                        <template slot-scope="scope">
                            <el-button type="text" @click="editData(scope.row)">提交修改</el-button>
                            <el-button type="text" @click="delList(scope.row.inputPondDetailId)">删除</el-button>

                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="已完成" name="COMPLETED">
                <el-table ref="multipleTable" :data="tableDataCompleted" tooltip-effect="dark" border style="width: 100%">
                    <el-table-column type="index" width="50" label="序号"></el-table-column>
                    <el-table-column prop="batchName" label="选择批次"></el-table-column>
                    <el-table-column prop="plantVarietyName" label="品种"></el-table-column>
                    <el-table-column label="规格">
                        <template slot-scope="scope">
                            <el-select v-if="!data.status" v-model="scope.row.specificationId" placeholder="请选择规格"
                                @change="(e) => { changeData(e, scope.row, 'select') }">
                                <el-option v-if="s.plantVarietyId == scope.row.plantVarietyId"
                                    v-for="s, index in specificationList" :key="index" :label="s.specificationName"
                                    :value="s.specificationId"></el-option>
                            </el-select>
                            <span v-else>{{ scope.row.specificationName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="prop5" label="重量(斤)">
                        <template slot-scope="scope">
                            <el-input v-if="!data.status" type="number" v-model="scope.row.weight" placeholder="请输入重量"
                                @change="(e) => { changeData(e, scope.row, 'number', 'weight') }"></el-input>
                            <span v-else>{{ scope.row.weight }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="prop6" label="粒数(粒)">
                        <template slot-scope="scope">
                            <el-input v-if="!data.status" type="number" v-model="scope.row.num" placeholder="请输入粒数"
                                @change="(e) => { changeData(e, scope.row, 'number', 'num') }"></el-input>
                            <span v-else>{{ scope.row.num }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="staffName" label="操作人"></el-table-column>
                    <el-table-column prop="inputDate" label="投塘时间"></el-table-column>
                    <el-table-column label="操作" v-if="!data.status">
                        <template slot-scope="scope">
                            <el-button type="text" @click="editData(scope.row)">提交修改</el-button>
                            <el-button type="text" @click="delList(scope.row.inputPondDetailId)">删除</el-button>

                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>

        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel">关 闭</el-button>
        </span>
    </el-dialog>
</template>
<script>
import pondInformationManagement from '@/api/pondManagment/pondInformationManagement.js';
import specificationManagement from '@/api/basicInformation/specificationManagement.js';
import varietyManagement from '@/api/basicInformation/varietyManagement';
import batch from '@/api/batch/batchManagement';
export default {
    components: {},
    props: {
        data: {
            type: Object,
            default: () => {
                return {}
            }
        },
        dialogVisible: {
            type: Boolean,
            default: () => {
                return false
            }

        }
    },
    data() {
        return {
            activeName: 'NOCOMPLETED',
            batchObj: {},
            page: 1,
            tableData: [],
            tableDataCompleted: [],
            tableDataNoCompleted: [],
            specificationList: [],
            varietyList: [],
            batchList: [],
        }
    },
    computed: {

    },
    watch: {
        dialogVisible(v) {
            v && this.initData()
        }
    },

    mounted() { 
        this.getComputedBatchList();
    },
    methods: {
        getComputedBatchList() {
            this.batchList = [];
            // 获取批次列表 
            batch.queryByCondition({ batchType: 'BREEDING' }).then(res => {
                this.batchList = res.data
                this.batchObj = {};
                this.batchList.forEach(item => {
                    this.batchObj[item.batchName] = item.status;
                })
                console.log(this.batchObj, this.batchList)
            })
        },
        // 获取下拉数据
        async getselectlist() {
            //规格；
            let { data: specificationList } = await specificationManagement.queryByCondition({});
            this.specificationList = specificationList;
            //获取品种；
            let { data: varietyList } = await varietyManagement.queryByCondition({});
            this.varietyList = varietyList || [];
        },
        async initData() {
            this.getselectlist();
            let id = this.data.facilityId;
            let { data: list } = await pondInformationManagement.queryDetailByFacilityIdList([id]);
            this.tableData = [];
            this.tableDataCompleted = [];
            this.tableDataNoCompleted = [];
            if (list && list.length > 0) {
                this.getPondList(list[0])
            }
        },
        getPondList(data) {
            let pondList = []
            if (data.inputPondList && data.inputPondList.length > 0) {
                data.inputPondList.forEach(pondInfo => {
                    if (pondInfo.inputPondDetailList && pondInfo.inputPondDetailList.length > 0) {
                        pondInfo.inputPondDetailList.forEach(info => {
                            pondList.push({
                                batchName: pondInfo.batchName,
                                inputDate: pondInfo.inputDate,
                                staffName: pondInfo.staffName,
                                ...info
                            })
                        })
                    }
                })
            }
            this.tableData = pondList;
            this.tableDataCompleted = [];
            this.tableDataNoCompleted = [];
            this.tableData.forEach(item => {
                console.log(this.batchObj[item.batchName])
                if (this.batchObj[item.batchName] == 'COMPLETED') {
                    this.tableDataCompleted.push(item)
                } else {
                    this.tableDataNoCompleted.push(item)
                }
            })
            console.log(pondList)
        },
        delList(id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                pondInformationManagement.delList(this.data.facilityId, id).then(res => {
                    if (res.code == 1) {
                        this.$message.success('删除成功');
                        this.initData();
                    } else {
                        this.$message.warning(res.msg || '删除失败');
                    }
                }).catch(err => {
                    console.log(err)
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        editData(editInfo = {}) {
            if (!editInfo.num || !editInfo.weight || !editInfo.specificationId) {
                return
            }
            let result = this.specificationList.find(obj => obj.specificationId == editInfo.specificationId);
            editInfo.specificationName = result.specificationName || ""
            pondInformationManagement.editDetail({ ...editInfo }).then(res => {
                if (res.code == 1) {
                    this.$message.success('修改成功');
                    this.$emit('queryFishPond');
                    this.initData();
                } else {
                    this.$message.warning('修改失败');
                }
            }).catch(err => {
                console.log(err)
            })
        },
        changeData(e, row, flag, key) {
            if (flag == 'select') {
                !e && this.$message.warning('修改该项不能为空！')
            } else if (flag == 'number') {
                e <= 0 && (this.$message.warning('请输入大于0的数值！'), row[key] = 1)
            }
        },
        //取消关闭
        cancel() {
            this.$emit("closeDialog")
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => { this.cancel() })
                .catch(_ => { });
        }
    }
};
</script>
<style lang="scss" scoped>
.pagination {
    text-align: right;
    padding-top: 20px;
}

::v-deep .el-dialog__body {
    padding-bottom: 10px;
}

.pondWarning {
    padding-bottom: 10px;
    color: rgb(6, 164, 236);
}
</style>
  